<template>
	<view class="container">
		<!-- 记录列表区域 -->
		<scroll-view class="record-list" scroll-y refresher-enabled @refresherrefresh="onRefresh"
			@scrolltolower="loadMore" :refresher-triggered="isRefreshing">
			<!-- <view class="record-item" v-for="(item, index) in recordList" :key="index" @click="goDetail(item)">
				<image v-if="item?.audit" :src="`${resourcesPath}/image/${item?.audit}.png`" class="audit-image" mode=""></image>
				<view class="record-header">
					<view class="time-info">
						<text class="date">{{dayjs(item.date).format('YYYY-MM-DD')}}</text>
						<text class="time">{{dayjs(item.date).format('HH:mm')}}</text>
					</view>
					<text class="location">{{item.subdistrict}}</text>
				</view>

				<view class="tags-container">
					<view class="tag tag-blue">
						乱张贴
					</view>
				</view>
				<view class="address-container">
					<uni-icons class="location-icon" type="location" size="16" color="#666666" />
					<text class="address">{{item.street}}</text>
					<uni-icons class="arrow-icon" type="right" size="16" color="#CCCCCC" />
				</view>
			</view> -->
			<view style="display: flex;flex-direction: column;gap:16px">
				<view style="background-color: #fff;padding: 0.75rem;border-radius: 0.75rem;"
					v-for="(item,index) in rewardList" :key="index" @click="toDetail(item)">
					<view style="display: flex;justify-content: space-between;align-items: center"
						class="flex justify-between">
						<view class="font-medium" style="font-weight: 500;">
							{{dayjs(item.createTime).year()}}-{{getWeekOfYear(item.createTime)}}周
						</view>
						<span style="color: #10b981;font-weight: 600;">+¥{{item.rewardAmount}} 分</span>
					</view>
					<view
						style="display: flex;justify-content: space-between;align-items: center;margin-top: 0.25rem;    color: #6b7280;">
						<span data-doubao-line="170">2025-05-30</span>
						<span data-doubao-line="171">已结算</span>
					</view>
				</view>
				<l-empty style="margin-top: 30vh;" v-if="!rewardList.length" description="空空如也" />

			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { resourcesPath } from '@/config/common.js'
	import dayjs from '@/utils/dayjs.main.js'
	import {
		nextTick,
		onMounted,
		reactive,
		ref
	} from "vue";
	import { request } from "../../utils/api";
	import { mainStore } from '../../store';
	import {getWeekOfYear} from '../../utils/commonUtils.js'

	// dayjs.extend(weekOfYear);
	
	const pageInfo = reactive({
		page: 1,
		pageSize: 15,
		total: 0
	})
	const isRefreshing = ref(false);

	const rewardList = ref<any[]>([

	]);

	const handleFilter = () => {
		// 处理筛选逻辑
	};



	const onRefresh = () => {
		isRefreshing.value = true;
		setTimeout(() => {
			isRefreshing.value = false;
		}, 1000);
	};

	const loadMore = () => {
		// 加载更多数据
		if (pageInfo.page * pageInfo.pageSize >= pageInfo.total) {
			return
		}
		pageInfo.page++
		getListData()
	};
	const getListData = () => {
		let { page, pageSize } = pageInfo
		let queryData : any = {}
		queryData.userId = (mainStore().userInfo?.id??"") + ""//
		request({
			url: '/sanitation/v1/reward_records',
			method: 'GET',
			data: { page, pageSize, query: JSON.stringify(queryData) }
		}).then(res => {
			pageInfo.total = res.total;
			rewardList.value = rewardList.value.concat(res.items)
		})
	}
	const toDetail = (item : any) => {
		uni.navigateTo({
			url: `/pages/rewardRecordsDetail/rewardRecordsDetail?id=${item.id}`
		})
	}
	onMounted(() => {
		getListData()
	})
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--status-bar-height));
		background-color: #F5F5F5;
	}

	.record-list {
		flex: 1;
		overflow: auto;
		padding: 24rpx;
		width: calc(100% - 48rpx);
	}

	.record-item {
		background-color: #FFFFFF;
		border-radius: 12px;
		padding: 24rpx;
		margin-bottom: 24rpx;
		width: calc(100vw - 48rpx - 48rpx);
		position: relative;

		.audit-image {
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
	}

	.record-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 24rpx;
	}

	.time-info {
		display: flex;
		flex-direction: column;
	}

	.date {
		font-size: 16px;
		color: #333333;
		font-weight: 500;
		margin-bottom: 8rpx;
	}

	.time {
		font-size: 14px;
		color: #666666;
	}

	.location {
		font-size: 14px;
		color: #666666;
	}

	.tags-container {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
		margin-bottom: 24rpx;
	}

	.tag {
		padding: 8rpx 20rpx;
		border-radius: 4px;
		font-size: 12px;
	}

	.tag-blue {
		background-color: #E6F3FF;
		color: #1890FF;
	}

	.tag-orange {
		background-color: #FFF3E6;
		color: #FA8C16;
	}

	.tag-green {
		background-color: #E6FFF2;
		color: #52C41A;
	}

	.tag-red {
		background-color: #FFE6E6;
		color: #F5222D;
	}

	.address-container {
		display: flex;
		align-items: center;
	}

	.location-icon {
		margin-right: 8rpx;
		flex-shrink: 0;
	}

	.address {
		flex: 1;
		font-size: 14px;
		color: #666666;
		margin-right: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.arrow-icon {
		flex-shrink: 0;
	}
</style>